<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script type="text/javascript" src="../../../static/jquery/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../../static/jquery/js/jquery-ui-1.8.23.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../../static/jquery/css/ui-lightness/jquery-ui-1.8.23.custom.css">
  <script>
  $(document).ready(function() {
    var $tabs=$("#tabs").tabs({
    	//event:"mouseover",
    	heightStyle:"content",
    	ajaxOptions:{async:false},
    	add:function(event,ui){
    		$tabs.tabs("select","#"+ui.panel.id);
    	}
    });
    $("#btn").click(function(){
  	 
  	  return false;
    })
    $("#button").button();
    $("#button").click(function(){
    	//$tabs.tabs("select",2);
    	//$tabs.tabs("option","disabled",false);
    	//$("#tabs").tabs("option","disabled",[1,2]);
    	//$("#tabs").tabs("option","collapsible",true);
    	$("#tabs").tabs("option","event","mouseover");
    });
  });
 
  </script>
  
  <style type="text/css">
  	#tabs{
  		height: 400px;
  		width: 600px;
  		margin: 0px auto;
  	}
  </style>
</head>
<body style="font-size:62.5%;">
  
<div id="tabs">
    <ul>
		<li><a href="/jsp/test/jquery/tab21.html"><span>one</span></a></li>
		<li><a href="/test/tab2.do"><span>two</span></a></li>
		<li><a href="/jsp/test/jquery/tab23.jsp"><span>three</span></a></li>
	</ul>
</div>
<a id="btn" href="/jsp/test/jquery/tab21.html">click me</a>
<div id="button">button</div>
</body>
</html>